<td class="tr8n_txtl" style="vertical-align:top; padding-top:5px;">
  <table>
    <tr>
      <td class="tr8n_txtl">
        <%=tr8n_user_mugshot_tag(translation.translator, :linked => true)%>
      </td>
      <td class="tr8n_txtl">
        <%=tr8n_user_tag(translation.translator, :linked => true)%>
        <div style="color:grey;<%=tr8n_style_attribute_tag('text-align', 'left')%>;">
            <%=translation.created_at.trl(:date_time) %>
        </div>
				<%=tr8n_translator_rank_tag(translation.translator)%>
      </td>
    </tr>
  </table>
</td>

<td class="tr8n_txtr" style="vertical-align:top; padding-top:5px;">
  <%=tr8n_spinner_tag("tr8n_spinner_for_#{translation.id}", "", "")%>
  <div class="tr8n_txtl" id="tr8n_votes_for_<%=translation.id%>" dir="ltr" style="padding:2px;white-space:nowrap;">
    <%= translation.rank_label %> 
  </div>  
</td>  

<td style="text-align:center; vertical-align:top; color:grey; padding-top:5px;">
  <% if translation.translation_key.locked? %>
    <div style="text-align:center;">
		  <%=image_tag("tr8n/lock.png", :style=>"height:14px", :title => trla("This phrase is locked"))%>
      <%=link_to_function(image_tag("tr8n/exclamation.png"), "Tr8n.UI.Lightbox.show('/tr8n/translator/lb_report?translation_id=#{translation.id}', {width:600, height:360});")%>
		</div>
	<% else %>
    <%=link_to_function(image_tag("tr8n/thumb_up.png"), "Tr8n.Translation.vote('#{translation.translation_key.key}', '#{translation.id}', 1)")%> 
    <%=link_to_function(image_tag("tr8n/thumb_down.png"), "Tr8n.Translation.vote('#{translation.translation_key.key}','#{translation.id}', -1)")%> 
    <%=link_to_function(image_tag("tr8n/exclamation.png"), "Tr8n.postMessage({'subject': 'translation', 'action': 'report', 'id': '#{translation.id}'}, '#{params[:origin]}')")%>
  <% end %>   
</td>

<td class="tr8n_txtl" style="vertical-align:top; padding-top:5px;">
  <% if mode == :view and translation.can_be_edited_by?(tr8n_current_translator) %>
    <span onDblClick="updateTranslationRow('<%=translation.id%>', 'edit')" title="Translation for: <%=translation.key.label%>">
      <%= translation.label %> 
    </span>
  <% elsif mode == :edit %>
    <%= text_area_tag("translation_row_value_#{translation.id}", translation.label, :style=>"width:99%;height:60px;border:1px solid #ccc;", :class => "keyboardInput" ) %>
	<% else %>	
    <%= translation.label %>
  <% end %>

  <% if translation.context %>
    <div style="font-size: 11px; color: grey; padding-top:3px;">
      <%=trla("Context:")%> <%= translation.context.html_safe %>  
    </div>
  <% end %>

  <% if [:list, :short_list].include?(mode) %>
	   <%= render :partial => "/tr8n/translations/original_phrase", :locals => {:translation => translation} %>
  <% end %>
</td>

<% if [:view, :edit].include?(mode) %> 
	<td style="text-align:right; vertical-align:top; padding-top:3px;">
	 <% if mode == :view %> 
	    <% if translation.can_be_edited_by?(tr8n_current_translator) %>
	        <%=link_to_function(image_tag("tr8n/pencil.png"), "updateTranslationRow('#{translation.id}', 'edit')")%>
	        <%=link_to_function(image_tag("tr8n/cross.png"), "deleteTranslationRow('#{translation.id}', '#{@section_key}')")%>
	    <% elsif translation.can_be_deleted_by?(tr8n_current_translator)  %>
	        <%=link_to_function(image_tag("tr8n/cross.png"), "deleteTranslationRow('#{translation.id}', '#{@section_key}')")%>
	    <% end %>   
	<% elsif mode == :edit %>
	    <%=link_to_function(image_tag("tr8n/disk.png"), "submitTranslationRow('#{translation.id}')")%>
	    <%=link_to_function(image_tag("tr8n/cancel.png"), "updateTranslationRow('#{translation.id}', 'view')")%>
	<% end %>
</td>
<% end %>

<% if mode == :edit %>
	<script>
	  VKI_attach(document.getElementById("translation_row_value_<%=translation.id%>"));
	</script>
<% end %>